<template>
    <div>
        <div v-for="(item, index) in phone">
            <div class="small_box" @click="cli(index)">
                <img :src="item.picurl" width="150px" height="150px">
                <p>{{ item.name }}</p>
                <p><span>¥{{ item.price }}</span><span>起</span><span>看相似</span></p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            phone: [{
                name: '红米10A',
                price: 6000,
                picurl:require('../image/redmi_10a.jpg')
            }, {
                name: 'OPPO A9',
                price: 6100,
                picurl:require('../image/redmi_10a.jpg')
            }, {
                name: 'HUAWEI 20',
                price: 6200,
                picurl:require('../image/redmi_10a.jpg')
            }, {
                name: 'VIVO X20',
                price: 6300,
                picurl:require('../image/redmi_10a.jpg')
            }, {
                name: '红米14A',
                price: 6400,
                picurl:require('../image/redmi_10a.jpg')
            }, {
                name: '红米15A',
                price: 6500,
                picurl:require('../image/redmi_10a.jpg')
            }]
        }
    },
    methods: {
        cli(index) {
            let title = this.phone[index].name;
            this.$emit('cli', title);
        }
    }
}
</script>

<style>

</style>